<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>HTML5翻书效果</title>
		<script type="text/javascript" src="../lufylegend-1.7.6.min.js"></script>
        </script>
        <script type="text/javascript">
            LSystem.screen(LStage.FULL_SCREEN);
        </script>
    </head>
    <body>
        <div id="legend">
        </div>
        <script>
        init(100, "legend", 700, 700, main);
        var leftspeed = 0;
        var leftindex = 1;
        var upspeed = 10;
        var upindex = 1;
        var vertices;
        var indices;
        var uvtData;
        var r = 10;
        var run_r = 50;
		var pointList;
        var backLayer,arcLayer;
        var bitmapData, bookBitmapData;
        var rows, cols;
        var mi = 0;
        var bx=350,by=150,bw=300,bh=450;
        var imgData = [
        {name:"page1",path:"imgs/1.jpg"}
        ,{name:"page2",path:"imgs/2.jpg"}
        ];
        var imglist;
        var can = true;
        function main(){
        	LGlobal.setDebug(true);
        	LLoadManage.load(imgData, null, gameInit);
        }
            
        function gameInit(result){
        	imglist = result;
        	//bookBitmapData = new LBitmapData(imglist["page1"]);
        	bookBitmapData = new LBitmapData("#ffffff",0,0,300,450);
                var i, j, obj,arr;
                cols = 300 / r;
                rows = 450 / r;
                pointList = [];
                vertices = new Array();
                for (i = 0; i <= cols; i++) {
                	arr = [];
                    for (j = 0; j <= rows; j++) {
						obj = {x : i * r,y : j * r,x1 : i * r,y1 : j * r,index:vertices.length};
                        vertices.push(i * r, j * r);
                        
						arr.push(obj);
                    }
					pointList.push(arr);
                }

                indices = new Array();
                for (i = 0; i < cols; i++) {
                    for (j = 0; j < rows; j++) {
                        indices.push(i * (rows + 1) + j, (i + 1) * (rows + 1) + j, i * (rows + 1) + j + 1);
                        indices.push((i + 1) * (rows + 1) + j, i * (rows + 1) + j + 1, (i + 1) * (rows + 1) + j + 1);
                    }
                }
                uvtData = new Array();
                for (i = 0; i <= cols; i++) {
                    for (j = 0; j <= rows; j++) {
                        uvtData.push(i / cols, j / rows);
                    }
                }
                backLayer = new LSprite();
                backLayer.x = bx;
                backLayer.y = by;
                addChild(backLayer);
                backLayer.graphics.clear();
                backLayer.graphics.beginBitmapFill(bookBitmapData);
                backLayer.graphics.drawTriangles(vertices, indices, uvtData,1,"#333333");
                
                
				arcLayer = new LSprite();
				arcLayer.x = bx + bw;
                arcLayer.y = by - run_r;
                addChild(arcLayer);
                backLayer.addEventListener(LEvent.ENTER_FRAME, onframe);
                var fps = new FPS();
                addChild(fps);
            }
            var index = 0;
            function onframe(){
            	if(can)run();
            }
            
            function run(){

				var l = Math.PI*2*run_r;
				var ang = (r/l)*Math.PI*2;
				//ang = 0.2;
				//if(180*ang*index/Math.PI > 360)return;
				if(arcLayer.x > bx ){
	            	index++;
					arcLayer.x = bx + bw - r*index;
                }else{
    				for (i = 0; i < pointList.length; i++){
	                    for (j = 0; j < pointList[0].length; j++) {
							obj = pointList[i][j];
							
							LTweenLite.to(obj,5,
							{ 
								x:-obj.x1,
								y:obj.y1,
								onUpdate:function(myobj){
									vertices[myobj.index] = myobj.x;
									vertices[myobj.index + 1] = myobj.y;
								},
								onComplete:function(myobj){
								},
								ease:Strong.easeOut
							});
	                    }
    				}
                	can = false;
                	return;
                }
                arcLayer.graphics.clear();
				arcLayer.graphics.drawArc(1,"#ff0000",[0,0,run_r,0,2*Math.PI]);
				var k = 1;
				for (i = pointList.length - index; i < pointList.length; i++,k++){
					
					var a = k*ang;
					if(a <= Math.PI){
						c_i = i;
						var x1 = Math.sin(a)*run_r;
						var y1 = Math.cos(a)*run_r;
	                    for (j = 0; j < pointList[0].length; j++) {
							obj = pointList[i][j];
							vertices[obj.index] = arcLayer.x - bx + x1 >>> 0;
							vertices[obj.index + 1] = -by + arcLayer.y + j*r + y1;
	                    }
					}else{
						var s = (a-Math.PI)/ang;
	                    for (j = 0; j < pointList[0].length; j++) {
							obj = pointList[i][j];
							vertices[obj.index] = arcLayer.x - bx - s*r;
							//平行
							//vertices[obj.index + 1] = -by + arcLayer.y + j*r - run_r;
							//直线倾斜
							//vertices[obj.index + 1] = -by + arcLayer.y + j*r - run_r + s*2;
							//抛物线
							vertices[obj.index + 1] = -by + arcLayer.y + j*r - run_r + s*s*0.4;
	                    }
					}
                }
            }
        </script>
    </body>
</html>